<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="format-detection" content="telephone=no" />
    <!-- <link rel="stylesheet" href="/static/css/normalize.css" /> -->
    <link rel="stylesheet" href="/static/css/reset.css" />
    <link rel="stylesheet" href="/static/css/book.css" />
    <title>书籍详情</title>
    <style>

    </style>
  </head>

  <body>
    <div id="app" :style="{width:screen_width}" v-cloak>
      <%- include('include/common-header.html', {nav: '书籍详情'}) %>
      <div class="container-scroll" :style="{width:screen_width}">
        <div class="book-page">
          <section class="main-card">
            <div class="u-book -detail">
              <div class="book-cover">
                <img
                  :src="item.cover"
                  :alt="item.title"
                />
              </div>
              <div class="info">
                <h3 class="title">{{item.title}}</h3>
                <p class="author"><span class="author">{{item.authors}}</span></p>
                <div class="u-grade"><span>{{item.score_count || 0}}条评价</span></div>
                <p class="price">价格：{{item.price || 3}}书币/千字</p>
                <p class="count">
                  字数：{{item.word_count}}字 <span class="u-booktag -serial">{{item.finish ? '完结' : '连载中'}}</span>
                </p>
              </div>
            </div>
          </section>
          <section class="main-card">
            <div class="book-dash">
              <div class="wrap">
                <ul class="btn-group">
                  <li class="u-btn2" @click="readBook()">
                    <span class="book-dash-text"></span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="u-folder">
              <div class="folder-cnt">
                {{item.content}}
              </div>
              <div class="folder-tail"><div>最新：{{item.latest}}</div></div>
            </div>
          </section>
          <section class="main-card">
            <div class="u-folder">
              <div class="folder-top">
                <h1>类别标签</h1>
              </div>
              <div class="folder-cnt">
                <ul class="m-tag -color">
                  <li class="u-tag" v-for="tag in item.tags" :key="tag.id">
                    {{tag}}
                  </li>
                </ul>
              </div>
            </div>
          </section>
          <section class="main-card">
            <div class="u-title">
              <h1>作者其他作品</h1>
            </div>
            <div class="cnt">
              <ul class="book-table">
                <li v-for="book in author_books" :key="book.id">
                  <div class="u-book -vertical">
                    <div class="book-cover">
                      <img :src="book.cover" :alt="book.title" :title="book.title">
                    </div>
                    <div class="info">
                      <p class="title">{{book.title}}</p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </section>
          <section class="main-card">
            <div class="u-title">
              <h1>喜欢这本书的人也喜欢</h1>
            </div>
            <div class="cnt">
              <ul class="book-table">
                <li v-for="book in related" :key="book.id">
                  <div class="u-book -vertical">
                    <div class="book-cover">
                      <img :src="book.cover" :alt="book.title">
                    </div>
                    <div class="info">
                      <p class="title">{{book.title}}</p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </section>
          <section class="main-card -folder">
            <div class="u-title">
              <h1>图书信息</h1>
            </div>
            <div class="cnt">
              <ul class="text">版权：{{item.rights}}</ul>
            </div>
          </section>
        </div>
      </div>
    </div>

    <script src="/static/script/vue.js"></script>
    <script src="/static/script/zepto.js"></script>
    <script src="/static/script/page/book.js"></script>
  </body>
</html>
